<!DOCTYPE html>
<html>
<head>
    <title>Supply Chain Management -- Dashboard</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link  href="<?php echo base_url();?>css/dashboard.css" rel="stylesheet" type="text/css" />

	<!-- 1. Add these JavaScript inclusions in the head of your page -->
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
		<script type="text/javascript" src="<?php echo base_url();?>js/highchart/js/highcharts.js"></script>
		
		<!-- 1a) Optional: add a theme file -->
		<!--
			<script type="text/javascript" src="<?php echo base_url();?>js/highchart/js/themes/gray.js"></script>
		-->
		
		<!-- 1b) Optional: the exporting module -->
		<script type="text/javascript" src="<?php echo base_url();?>js/highchart/js/modules/exporting.js"></script>
		
		
		<!-- 2. Add the JavaScript to initialize the chart on document ready -->
		<script type="text/javascript">
		
			var chart;
			$(document).ready(function() {
				chart = new Highcharts.Chart({
					chart: {
						renderTo: 'container',
						type: 'line'
					},
					title: {
						text: 'Supply'
					},
					subtitle: {
						<?php
							if($leftDashboard['graphoption'] == 'summary-pay'){
								echo "text: 'ราคาวัตถุดิบที่รับซื้อ'";
							}else if($leftDashboard['graphoption'] == 'summary-wg'){
								echo "text: 'น้ำหนักวัตถุดิบที่รับซื้อ'";
							}
						?>
						//text: 'An example of irregular time data in Highcharts JS'	
					},
					xAxis: {
						type: 'datetime',
						dateTimeLabelFormats: { // don't display the dummy year
						second: '%H:%M:%S',
						minute: '%H:%M',
						hour: '%H:%M',
						day: '%e. %b',
						week: '%e. %b',
						month: '%b \'%y',
						year: '%Y'
						}
					},
					yAxis: {
						title: {
							<?php
								if($leftDashboard['graphoption'] == 'summary-pay'){
									echo "text: 'ราคาวัตถุดิบที่รับซื้อ (บาท)'";
								}else if($leftDashboard['graphoption'] == 'summary-wg'){
									echo "text: 'น้ำหนักวัตถุดิบที่รับซื้อ (กิโลกรัม)'";
								}
							?>
							//text: 'Snow depth (m)'
						},
						min: 0
					},
					tooltip: {
						formatter: function() {
				                return '<b>'+ this.series.name +'</b><br/>'+
								Highcharts.dateFormat('%Y-%m-%e %H:%M:%S', this.x) +': '+ this.y+'        .';
						}
					},
					series: [
	<?php
		foreach ($leftDashboard['dat'] as $larnname => $arr):
	?>	{
			name: '<?=$larnname;?>',
			
			data: [
			<?php foreach($arr as $dateandtotal): ?>
			
				[<?="{$dateandtotal['dateupload']}";?> , <?=$dateandtotal['total'];?> ],
				
			<?php endforeach;?>
			],
			color: '<?php echo $leftDashboard['poscolor'][$larnname];?>'
		},
	<?php	
		endforeach;
	?>

					]
				});
				
				
			});
				
		</script>
    <!-- google geo-->
     <script type='text/javascript'>
   google.load('visualization', '1', {'packages': ['geochart']});
   google.setOnLoadCallback(drawRegionsMap);

    function drawRegionsMap() {
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Country');
      data.addColumn('number', 'Popularity');
      data.addRows([
        ['Ubon Ratchathani', 500],
		['Si Sa Ket', 200],
		['Udon Thani', 1000]
      ]);

      var options = {
          width: 400, height: 200,
		  region: 'TH', 
		  resolution: 'provinces',
	  };

      var chart = new google.visualization.GeoChart(document.getElementById('chart2_div'));
      chart.draw(data, options);
  };
  </script>
  <!--google pie chart-->
  <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Task');
        data.addColumn('number', 'Hours per Day');
        data.addRows([
          ['Phase1',    11],
          ['Phase2',      2],
          ['Phase3',  2],
          ['Phase4', 2],
          ['Phase5',    7]
        ]);

        var options = {
          width: 450, height: 300,
          title: 'วงจรการเพาะปลูกแบ่งตามพื้นที่'
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart_div'));
        chart.draw(data, options);
      }
    </script>
    <!--google gauge-->
     <script type='text/javascript'>
      google.load('visualization', '1', {packages:['gauge']});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Label');
        data.addColumn('number', 'Value');
        data.addRows([
          ['โรงแป้ง', 80],
          
          ['โรงเอทานอล', 68]
        ]);

        var options = {
          width: 400, height: 120,
          redFrom: 90, redTo: 100,
          yellowFrom:75, yellowTo: 90,
          minorTicks: 5
        };

        var chart = new google.visualization.Gauge(document.getElementById('guage_div'));
        chart.draw(data, options);
      }
    </script>
   
</head>
<body>

 <div id="contentright">
        <div id="search">
          <div id="searchblank">
            <div id="searchinput">
             Welcome, admin
            </div>
          
            <div id="advancesearch"><a href="#" class="advancesearch">Logout</a></div>
          </div>
        </div>
        </div>
    <div id="main">
        <?php 
        $menu['nowmenu'] = 'dashboard';
        $this->load->view('common/divheader',$menu);
        ?>
        
        <div id="middle">
        <div id="breadcrumbs"><a href="#">Dashboard</a></div>
        
            <div id="left-column"> 
              <div class="leftbox">
                <h3>Supply Upload Real Time Log</h3>
                 <p><div id="container" style="width: 400px; height: 300px; margin: 0 auto"></div></p>
              </div>
              
              <div class="table">
                <div class="linkpad">
                <strong>ดูทั้งหมด </strong></div>
                <table class="listing" cellpadding="0" cellspacing="0">
                	<thead>
                    <tr>
                        <th>Date/Time</th>
                            <th>ลาน</th>
                        <th>น้ำหนักสุทธิ</th>
                        <th>รวมซื้อสุทธิ</th>
                    </tr>
                    </thead>
                    <tbody>
    		<?php 
    			foreach ($leftDashboard['realtimeUpload'] as $row):
    		?>
    				<tr class="style2">
    					<td><?php echo $row['dateupload'];?> </td>
    					<td><?php echo $row['posname'];?> </td>
    					<td><?php echo $row['sum_netwg'];?> </td>
    					<td><?php echo $row['sum_netbuy'];?></td>
    				</tr>
    		<?php 	
    			endforeach;
    		?>
    	
    	</tbody>
                </table>
                  
                </div>
                <div class="leftbox">
                   <h3>Header</h3>
                <ul class="nav">
                    <li><a href="#">จำนวนเกษตรกร 1,000 คน</a></li>
                    <li><a href="#">พื้นที่รวม 1,700.5 ไร่</a></li>
                    <li><a href="#">ปริมาณผลผลิต 50,000 ตัน</a></li>
                    <li><a href="#">รวมซื้อวัตถุดิบ 30,000,000 บาท</a></li>
                    <li><a href="#">ราคามันเฉลี่ย 6.75 บาท</a></li>
                    <li><a href="#">คุณภาพแป้งเแลี่ย 100%</a></li>
                </ul>
                <a href="#" class="link">Link here</a>
                <a href="#" class="link">Link here</a>
            </div></div>
              
                
                
            
            <div id="center-column">
            <p></p>
                <div class="top-bar">
                    
                    <h1>Land Strategic Planning</h1>
                   
                </div>
                <div class="select-bar">
                    <p>
                  <div id='chart2_div'></div>
                    </p>
                    <p>filter range | month | year	</p>
                    <div class="link">
                        <strong>FIlter by: </strong>
                        <select>
                            <option>อำเภอ</option>
                            <option>ปริมาณผลผลิต</option>
                            <option>จำนวนเกษตรกร</option>
                      </select>
                  </div>
                    
                </div>
                <div class="table">
                    <table class="listing" cellpadding="0" cellspacing="0">
                        <tr>
                            <th>อำเภอ</th>
                            <th>จำนวนเกษตรกร</th>
                            <th>พื้นที่เพาะปลูก</th>
                            <th>จำนวนผลผลิต</th>
                        </tr>
                        <tr>
                            <td class="style2">วารินทร์</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                        </tr>
                        <tr>
                            <td class="style2">เดชอุดม </td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                        </tr>
                        <tr>
                            <td class="style2">ตระการพื้ชผล</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                        </tr>
                    </table>
                    <div class="select">
                        <strong>Other Pages: </strong>
                        <select>
                            <option>1</option>
                      </select>
                  </div>
              </div>
                <div class="table">
                    <table class="listing form" cellpadding="0" cellspacing="0">
                        <tr>
                            <th class="full" colspan="2">วงจรการเพาะปลูก</th>
                        </tr>
                        <tr>
                            <td width="172"><strong>Phase 1 เริ่มปลูก</strong></td>
                            <td>430 ไร่</td>
                        </tr>
                        <tr>
                            <td><strong>Phase 2 เริ่มปลูก</strong></td>
                            <td>&nbsp;</td>
                        </tr>
                        <tr>
                            <td><strong>Phase 3 เริ่มปลูก</strong></td>
                            <td>&nbsp;</td>
                        </tr>
                        <tr>
                            <td><strong>Phase 4 เริ่มปลูก</strong></td>
                            <td>&nbsp;</td>
                        </tr>
                    </table>
                </div>
                <div id='piechart_div'></div>
                
            </div>
            <div id="right-column">
            
             <div class="select-bar">
               <p>
             <ul id="top-selector">
                <li><a href="dashboard.html">Realtime</a></li>
                <li><a href="member.html">Summary</a></li>
            </ul></p>
                      <label>
                        <input type="text" name="textfield" />
                      </label>
                      <label>
                        <input type="submit" name="Submit" value="Search" />
                      </label>
                 
               
</div>
                <strong class="h">Quick Info</strong>
                <div class="box">- จำนวนลานทั้งหมด		234<br>
                  - จำนวนเกษตรกร		5555<br>
                  - ปริมาณการซื้อ		1,345,678<br>
                  - จำนวนเงินสุทธิ		4,567,890<br>
                  - เงินคงเหลือหน้าลาน<br>
                  - ปริมาณเฉลี่ย<br>
                  - อัตราการเพิ่มของวัตถุดิบ<br>
                  - จำนวนรถเข้า<br>
                - จำนวนใบชั่ง</div>
                </div>
                <div id="right-column">
                 <h3>Production Rate</h3>
                <div id='guage_div'></div></div>
        </div>
        <div id="footer"><p>ALL RIGHTS RESERVED 2012 <a href="http://www.ubonbioethanol.com">UBON BIO ETHANOL CO., LTD.</a><br>Developed by DASH CO., LTD (2011-2012).  </p></div>
    </div>
</body>
</html>